<template>
    <div>
        <h1>插槽列表演示</h1>
        <SonDemo17 :cake :list="list5"></SonDemo17>

    </div>
</template>

<script lang="ts">
export default {
    name: 'diyDemo45'
}
</script>

<script setup lang='ts'>
import { onMounted, provide, ref, type Ref } from 'vue';
import SonDemo17 from './components/SonDemo17.vue';
import { type IDemo45List } from '@/service/types/diyDemo45';
import { getList } from '@/service/study4/diyDemo45'
import { myInjectionKey } from './components/keys'

const list5 = ref<IDemo45List[]>([])
const cake = ref('蛋糕')
const heshibi = ref('爷爷的和氏璧')
// 提供者
provide<{ heshibi: Ref<string> }>(myInjectionKey, {
    heshibi
})

onMounted(async () => {
    list5.value = await getList()
})

</script>

<style lang="scss" scoped></style>